<template>
  <div class="page">
    <div class="pageall">
      <span class="pageleft" @click="prepage()"> < 上一页</span>
      <b class="leftb" v-show="leftb">...</b>
      <span class="pagelist" v-for="item,index of totalpage" v-show="index>=startpage && index<endpage" @click="pageslic(index)" :class="{active:index==pageindex}">{{item}}</span>
      <b class="rightb" v-show="rightb">...</b>
      <span class="pageright" @click="nextpage()">下一页 > </span>
      <span class="pagetotal">共 {{total}} 条记录</span>
      <span class="pagesplit">当前 {{pageindex+1}}/{{totalpage}}页</span>
      <span class="pageinput">到第 <input type="text" v-model="inputpage">页 <span @click="bount">确定</span></span>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  data () {
    return {
      total: 0,
      cur: 8,
      pageindex: 0,
      inputpage: 1,
      startpage: 0,
      endpage: 5
    }
  },
  created () {
    var this_ = this;
    this.bus.$on('navtotal', function(content) {
      this_.total = content.total
      //每次切换更新 分页顺序初始化
      this_.pageindex = this.AssetsType.index

      if(this_.pageindex<4) {
        this_.startpage=0
        this_.endpage=5
      }
      // console.log(this_.pageindex+/indexpage and totalpage/+this_.totalpage)
      if(this_.pageindex+4>=this_.totalpage){
        this_.startpage = this_.totalpage-5
        this_.endpage = this_.totalpage
      }

    })
  },
  computed: {
    totalpage () {
      // console.log(Math.ceil(this.total/this.cur))
      // console.log(Math.ceil(this.total / this.cur)+'---computend')
      return Math.ceil(this.total / this.cur)
    },
    leftb () {
      return this.pageindex < 4 ? 0 : 1
    },
    rightb () {
      return this.totalpage - this.pageindex <= 4 ? 0 : 1
    }
  },
  watch: {
    pageindex: function () {
      if(this.pageindex<4) {
        this.startpage=0
        this.endpage=5
      }

      if(this.pageindex+4>=this.totalpage){
        this.startpage = this.totalpage-5
        this.endpage = this.totalpage
      }

      // console.log(this.startpage+'///'+this.endpage)
    }
  },
  methods: {
    pageslic (index) {
      this.pageindex = index
      if(this.pageindex>=4){
        this.startpage = this.pageindex-2
        this.endpage = this.pageindex+3
      }
      this.AssetsType.index = index
      this.bus.$emit('change')
    },
    prepage () {
      if (this.pageindex > 0) {
        this.pageindex -= 1
      }

      if(this.pageindex>=5 ){
        this.startpage = this.pageindex-2
        this.endpage = this.pageindex+3
      }
      this.AssetsType.index = this.pageindex
      this.bus.$emit('change')
    },
    nextpage () {
      if(this.pageindex < this.totalpage-1){
        this.pageindex += 1
      }
      if(this.pageindex>=5 && this.endpage !=this.totalpage){
        this.startpage = this.pageindex-2
        this.endpage = this.pageindex+3
      }
      this.AssetsType.index =this.pageindex
      this.bus.$emit('change')

    },
    bount () {
      this.pageindex = this.inputpage-1
      this.startpage = this.pageindex-2
      this.endpage = this.pageindex+3
      this.inputpage = 1
      this.AssetsType.index =this.pageindex
      this.bus.$emit('change')

    }
  },
  beforeDestroy () {
    this.bus.$off('change')
    this.bus.$off('navtotal')
  }
}
</script>

<style scoped type="text/stylus" lang="stylus">
  .page
    width: 1200px; height: 44px; margin: 0 auto;
    .pageall
      text-align :right;height:25px;
      span
        display:inline-block;height:25px;line-height:25px;text-align:center;font-size:12px;color: #5E5E5E;
      .pageleft, .pageright
        width:70px;border: 1px solid #e6e6e6;cursor:pointer
      .pagelist
        width:25px;border: 1px solid #e6e6e6;cursor:pointer;margin-right:-1px;
      .pagetotal, .pagesplit, .pageinput
        font-size:14px;padding-left:10px;
      .pageinput input
        width:20px;border-bottom: 1px solid #777;text-align:center;color: #333;
      .pageinput span
        cursor:pointer
      .active
        background: #F8F5EE; color: #a5a5a5; cursor: default;
</style>
